<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::commonlinks(~{::title},~{::link})">
    <meta charset="UTF-8">
    <title>忘记密码</title>
    <link rel="stylesheet" th:href="@{/unauthorize/login.css}">
</head>
<body class="hold-transition sidebar-collapse layout-top-nav layout-navbar-fixed"  style="height: 773px">
<div class="wrapper">

    <!-- Navbar -->
    <div th:include="~{common/header::topnavbar-md}"></div>
    <!-- /.navbar -->

    <!-- Main Sidebar Container -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <!-- Main content -->
        <div class="content">
            <div class="stars-bg">
                <div id="stars"> </div>
                <canvas id="cvs"></canvas>
            <div class="container  login-page" style="position: absolute;opacity: 0.9">
                <div class="login-box">

                    <!-- /.login-logo -->
                    <div class="card">
                        <div class="login-logo">
                            <a href="#"><b>忘记密码</b></a>
                        </div>
                        <div class="card-body login-card-body">
                            <p class="login-box-msg">您忘记密码了吗？在这里您可以轻松获取新密码。</p>

                            <form class="am-form needs-validation validateForm"
                                  novalidate th:messageVo="${passwordVO}" action="" method="">
                                <div class="input-group mb-3">
                                    <input type="email" class="form-control" placeholder="邮箱" name="email" required>
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-envelope"></span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        请输入合法的邮箱
                                    </div>
                                </div>
                                <div class="input-group mb-3">
                                    <input type="number" class="form-control" placeholder="验证码6位" name="code" required pattern="\d{6}">
                                    <div class="col-6">
                                        <button type="button" class="btn btn-primary btn-block send-code valid-button">发送验证码</button>
                                    </div>
                                    <div class="input-group-append">
                                    </div>
                                    <div class="invalid-feedback">
                                        验证码不能为空,且必须是6位
                                    </div>
                                </div>
                                <div class="row">

                                    <div class="col-12">
                                        <button type="button" class="btn btn-primary btn-block valid-code valid-button">需要新密码
                                        </button>
                                    </div>
                                    <!-- /.col -->
                                </div>
                            </form>

                            <p class="mt-3 mb-1">
                                <a th:href="@{/unAuthorize/login}">登录</a>
                            </p>
                            <p class="mb-0">
                                <a th:href="@{/unAuthorize/toregister}" class="text-center">注册新用户</a>
                            </p>
                        </div>
                        <!-- /.login-card-body -->
                    </div>
                </div>
                <!-- /.login-box -->
                <!-- 右侧栏 -->
                <div th:include="~{common/header::rightaside}"></div>
                <!-- /右侧栏 -->
                <!-- 底部栏 -->
                <div style="width:70%" th:include="~{common/footer::footer}"></div>
                <!-- /底部栏 -->
                <!--    公有的js-->
                <div th:replace="common/header::commonjs(~{::script})">
                    <!--        私有的js-->
                    <script th:src="@{/admin/article/index.js}"></script>
                    <script th:src="@{/unauthorize/login.js}"></script>
                </div>
            </div><!-- /.container-fluid -->
            </div>
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->
<script>
    var vercode = 0;
    var time = 60;
    var flag = true;   //设置点击标记，防止60内再次点击生效

    // 发送验证码
    $(".send-code").off().on('click', function () {
        var Value = $("input[name='email']").val();
        if (Value.length != 0) {
            $(".send-code").text("正在发送请稍等");
            if (flag) {
                $(this).attr("disabled", true);

                var timer = setInterval(function () {
                    if (time == 60 & flag) {
                        flag = false;
                        $.ajax({
                            url: '/unAuthorize/sendCode?email=' + Value,
                            type: 'get',
                            dataType: "json",
                            // data:{
                            //     email:'1417279498@qq.com'
                            // },
                            async: true,
                            processData: false,   // 不处理发送的数据
                            contentType: false,   // 不设置Content-Type请求头
                            success: function (res) {
                                if(res.code==200)
                                {
                                    $(".send-code").text("已发送");
                                    $.toast({
                                        title: '通知',
                                        subtitle: '1秒前',
                                        content: res.data,
                                        type: 'info',
                                        delay: 20000,
                                        pause_on_hover: false
                                    });

                                }
                                else {
                                    $.toast({
                                        title: '通知',
                                        subtitle: '1秒前',
                                        content: res.msg,
                                        type: 'info',
                                        delay: 20000,
                                        pause_on_hover: false
                                    });
                                }
                            }
                        })

                    } else if (time == 0) {
                        $('.send-code').removeAttr('disabled');
                        $('.send-code').text("发送验证码");
                        clearInterval(timer);
                        time = 60;
                        flag = true;
                    } else {
                        $('.send-code').text(time + "s后重新发送");
                        time--;
                    }
                }, 1000);
            }
        }
    })

    //验证验证码
    $(".valid-code").off().on('click', function () {
        var email = $("input[name='email']").val();
        var code = $("input[name='code']").val();
        if (email.length != 0 && code.length != 0) {
            $.ajax({
                    url: '/unAuthorize/validCode?email=' + email + '&code=' + code,
                    type: 'get',
                    dataType: "json",
                    // async: true,
                    processData: false,   // 不处理发送的数据
                    contentType: false,   // 不设置Content-Type请求头
                    // headers: {'Content-Type': 'application/json;charset=utf8'},
                    // data: JSON.stringify({
                    //
                    //     "email": email,
                    //     "code": code
                    // })
                    success:
                        function (res) {
                            if (res.code == 200) {
                                window.location.href = '/unAuthorize/torecoverpassword?uid=' + res.data;
                            } else {

                                $.toast({
                                    title: '通知',
                                    subtitle: '1秒前',
                                    content: res.msg,
                                    type: 'info',
                                    delay: 20000,
                                    pause_on_hover: false
                                });
                            }
                        }
                }
            )

        }
    })
</script>
</body>
</html>